<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="./js/vue.js"></script>
    <title>vue01</title>
</head>
<body>
<!-- 挂载点，模板，实例之间的关系 -->
<div id="app">
    <!-- 挂载点 -->
    <div id="root">
        <!-- 模板 start -->
        <h1>template {{msg}}</h1>
        <br/>
        {{number}}
        <h1 v-text="content"></h1>
        <h1 v-html="content"></h1>
        <div v-on:click="handleClick">{{msg}}</div>
        <div @click="handleClick">{{content}}</div>
        <!-- 模板 end -->
    </div>
    <script>
        import HelloWorld from './components/helloworld.vue'
        // 实例
        new Vue({
            el: '#root', // 挂载点Id
            components: {
                'hello-world': HelloWorld
            },
            // template: '<span>template {{msg}}</span>',
            data: {
                msg: 'he',
                number: 123,
                content: '<h1>hello</h1>'
            },
            methods: {
                handleClick: function() {
                    this.$data.content = 'world'
                }
            }
        })
    </script>
</div>
</body>
</html>
